<template>
  <div class="Question_container">
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/home/:username' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>互评测试</el-breadcrumb-item>
    </el-breadcrumb>
    <template>
      <!--问题-->
      <div class="Question">
        {{questionList[index].title}}
      </div>

      <!--问题选项-->
      <div class="Option">
        <!--单选题-->
        <div  v-if = 'questionList[index].type === "single" '>
          <template>
            <el-radio-group v-model="radio[index]" class="Single">
              <el-radio  v-for="item1 in questionList[index].chooseList"  :label="item1" >{{item1}}</el-radio>
            </el-radio-group>
          </template>
        </div>

        <!--多选题-->
        <div v-if = 'questionList[index].type === "multiple" '>
          <template  >
            <!--1、data获取数据。2、定义height即可固定表头-->
            <el-table
                class="RateList"
                :data="questionList[index].chooseList"
                height="335"
                style="width: 400px">

              <el-table-column
                  label="情绪问题"
                  width="180">
                <!--slot-scope可以获取到table内的数据-->
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row}}</span>
                </template>
              </el-table-column>

              <el-table-column label="评分" width="180" >
                <!--slot-scope=""scope:slot插槽，定义了一个scope的对象，用来获取表格的数据对象-->
                <template slot-scope="scope">
                  <div class="block">
                    <!--获取表格的数据：用scope.$index获取每一行的行索引,用scope.row获取每一行数据对象-->
                    <el-rate v-model="rate[scope.$index]"></el-rate>
                  </div>
                </template>
              </el-table-column>

            </el-table>
          </template>
        </div>
      </div>

      <el-row>
        <el-button type="primary"  class="Pre_btn"  @click="previousQuestion"  v-show="index>0" round>上题</el-button>
        <el-button type="primary"  class="Next_btn"  @click="nextQuestion"  v-show="index<questionList.length-1" round>下题</el-button>
        <el-button type="success"  class="Commit_btn"  @click="commit"  v-show="index==questionList.length-1" round>提交</el-button>
      </el-row>

    </template>
  </div>

</template>

<script>
export default {
  name: "Question",
  data(){
    let row1
    return{
      questionList: [
        {
          type: 'single',
          title: '1.你觉得他/她是否对外界刺激反应过于激烈，行事冲动？',
          chooseList: [
            '不符合',
            '不太符合',
            '不确定',
            '较符合',
            '非常符合'
          ],
          id: 0,
        },
        {
          type: 'single',
          title: '2.你觉得他/她总是沉默寡言，主动与人疏远？',
          chooseList: [
            '不符合',
            '不太符合',
            '不确定',
            '较符合',
            '非常符合'
          ],
          id: 1,
        },
        {
          type: 'single',
          title: '3. 你觉得他/她是否教条保守，拒绝尝试新鲜事物？',
          chooseList: [
            '不符合',
            '不太符合',
            '不确定',
            '较符合',
            '非常符合'
          ],
          id: 2,
        },
        {
          type: 'single',
          title: '4. 你觉得他/她是否愤世嫉俗，易起疑心，在日常交往中掩饰自己？',
          chooseList: [
            '不符合',
            '不太符合',
            '不确定',
            '较符合',
            '非常符合'
          ],
          id: 3,
        },
        {
          type: 'single',
          title: '5. 你觉得他/她是否是一个有责任感，组织能力的人？',
          chooseList: [
            '不符合',
            '不太符合',
            '不确定',
            '较符合',
            '非常符合'
          ],
          id: 4,
        },
        {
          type: 'multiple',
          title: '6. 你觉得他/她最近两周内，是否出现了以下情绪？',
          chooseList: [
            '焦虑',
            '抑郁',
            '强迫症行为',
            '与人相处十分敏感',
            '出现自伤行为',
            '出现自杀行为'
          ],
          id: 5,
        },
      ],
      index:0,
      /*单选题要返回的值是字符串数组，评分题返回的是整型数组*/
      /*单选值*/
      radio: [''],
      /*多选值*/
      rate: [],
      row:[''],
      city:''
    }
  },
  /*通过console.log（this.$route）查看所需要的的数据在this.$route.params中，取出来取个名字保存*/
  created() {
    console.log(this.$route)
    this.row=this.$route.params;
  },

  methods:{
    /*遍历索引递增*/
    previousQuestion(){
      this.index--;
    },
    nextQuestion(){
      this.index++;
    },
    /*提交方法*/
    commit(){
      /*this.$notify({
        title: '提交成功！',
        message: '感谢您的评价',
        type: 'success',
      });*/

      var data_json={};
      data_json['radio'] = this.radio;
      data_json['rate'] = this.rate;
      data_json['numID'] = this.row.numID;

      /*转化字符串*/
      data_json=JSON.stringify(data_json);
      /*保证题目都填写了*/
      if (this.radio.length != 5){
        this.$message({
          showClose: true,
          message: '请确认没有未填写信息！',
          type: 'warning'
        });
      }else{
        this.$axios.post(
            'localhost:8088/submit',
            {
              contentType: 'application/json;charset=utf-8',
              data:data_json
        })
            .then(res=>{
              this.$message({
                showClose: true,
                message: '提交成功！',
                type: 'success'
              });
            }).catch(
            function (error) {
              // 请求失败处理
              alert('请求失败！')
            })
      }

    }
  },

}
</script>
<style scoped>
.Question_container{
  height: 100%;
}
.Question{
  width: 100%;
  height: 100px;
  font-size: 25px;
  padding: 20px 20px 10px 10px;
  text-align: left;
  white-space: pre-line;
}
.Option{
  width: 60%;
  height: 100px;
  text-align: left;
  margin: 10px 10px ;
}
.Pre_btn{
  position: absolute;
  left: 580px;
  top:150px;
}
.Next_btn{
  position: absolute;
  left: 680px;
  top:150px;
}
.Commit_btn{
  position: absolute;
  left: 680px;
  top:150px;
}
</style>
